<template>
	<div v-loading="loading" class="chat">
		<el-button v-show="open" @click="restart">聊天室网络异常，点击重新链接</el-button>
		<div class="chat__content">
			<div v-show="!open" class="chat__msg">
				<!-- <Config /> -->
				<Tab />
				<search></search>
				<chatlist :clear="clear" @selectSession="selectSession"></chatlist>
			</div>
			<div v-show="!open" class="chat__box">
				<!-- 会话 -->
				<message ref="message"></message>
				<!-- <v-text @send="send" @shop="shop"></v-text> -->
			</div>
		</div>
		<Shop ref="shop" @selectList="handleSelectList" />
	</div>
</template>

<script>
import { mapActions, mapMutations, mapGetters } from 'vuex';
import search from './components/search/search';
import chatlist from './components/chatlist/chatlist';
import message from './components/message/message';
import vText from './components/text/text';
import Config from './components/config';
import Tab from './components/tab';
import Shop from './components/shop';
import { formatDate } from '@/utils';
import { clearUnread } from '@/api/mall/chat';

export default {
	name: 'Chat',
	computed: {
		...mapGetters(['selectId']),
		loading() {
			return this.$store.state.ws.number < 5 && this.$store.state.ws.loading;
		},
		open() {
			return this.$store.state.ws.number >= 5;
		},
	},
	data() {
		return {
			ws: null,
			clear: false,
		};
	},
	methods: {
		restart() {
			// 校验登录
			this.$store.state.ws.number = 0;
			this.$store.dispatch('GetInfo');
			//this.$store.dispatch('ws/connect');
		},
		...mapMutations({
			getList: 'ws/GET_LIST',
		}),
		//获取好友列表
		...mapActions({
			getChatlist: 'chat/getChatlist',
			sendMessage: 'ws/send',
		}),
		selectSession(id) {
			clearUnread(id).then(() => {
				this.getList();
			});
		},
		shop() {
			this.$refs.shop.open();
		},
		handleSelectList(arr) {
			arr.forEach((item) => {
				this.send(
					{
						content: JSON.stringify({
							goodsId: item.id,
							goodsName: item.name,
							picUrl: item.picUrl,
							retailPrice: item.retailPrice,
							sales: item.commoditySales + item.expectCommoditySales,
							brand: item.brand,
							burst: item.burst,
							isHot: item.isHot,
						}),
						msgType: 4,
						selectId: this.selectId,
					},
					false
				);
			});
		},
		send(value, refresh = true) {
			let obj = {
				msg: value.content,
				userId: this.$store.getters.userId,
				nickName: this.$store.getters.kfInfo.name || this.$store.getters.name,
				photo: this.$store.getters.kfInfo.headUrl || this.$store.getters.avatar,
				type: 1,
				msgType: value.msgType,
				joinUserId: value.selectId,
				sendTime: formatDate(new Date()),
				self: true,
			};
			if (!value.selectId) {
				this.msgError('请选择会话');
				return;
			}
			console.log(value.content, 'value.content');
			this.sendMessage(JSON.stringify(obj));
			this.$store.dispatch('chat/sendMessage', obj);
			this.getList();
			if (refresh) {
				setTimeout(() => {
					this.$refs.message.refresh(false);
				}, 100);
			}
		},
	},
	components: {
		search,
		chatlist,
		message,
		vText,
		Config,
		Tab,
		Shop,
	},
};
</script>

<style lang="scss" scoped>
.chat {
	background: #f7f7f7;
	padding: 32px 22px;
	min-height: 100vh;
	position: relative;
	&__content {
		display: flex;
		position: relative;
	}
	&__fixed {
		z-index: 9999;
	}
	&__msg {
		width: 356px;
		background: #ffffff;
		box-shadow: 6px 0 9px rgba(165, 165, 165, 0.16);
		margin-right: 22px;
		border-radius: 8px;
		position: relative;
		overflow: hidden;
	}
	&__box {
		width: calc(100% - 378px);
		border-radius: 8px;
		background: #f2f2f2;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		//overflow: hidden;
	}
}
</style>
